// import { Button } from 'element-ui'
// 复杂表格
export const addtablelist = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addtablelist', {
        model: {
            defaults: {
                tagName: 'div', // 标签名
                name: 'addtablelist',
                droppable: true,
                components: [{
                    tagName: 'table',
                    droppable: false,
                    attributes: {
                        class: 'normal-table'
                    },
                    components: [{
                        tagName: 'thead',
                        droppable: false,
                        attributes: {
                            class: 'big-header'
                        },
                        components: [{
                            tagName: 'tr',
                            droppable: false,
                            attributes: {
                                class: 'table-header'
                            },
                            components:[{
                                tagName:'th',
                                droppable: false,
                                components:[{
                                    type:'text',
                                    droppable: false,
                                    content:'分组'
                                }]
                            },{
                                tagName:'th',
                                droppable: false,
                                components:[{
                                    type:'text',
                                    droppable: false,
                                    content:'模块'
                                }]
                            },{
                                tagName:'th',
                                droppable: false,
                                components:[{
                                    type:'text',
                                    droppable: false,
                                    content:'基础价格'
                                }]
                            },{
                                tagName:'th',
                                droppable: false,
                                components:[{
                                    type:'text',
                                    droppable: false,
                                    content:'用户单价'
                                }]
                            }]


                        }]
                    }, {
                        tagName: 'tbody',
                        droppable: false,
                        attributes: {
                            class: 'table-body',
                            id: 'table-body'
                        },
                    }]

                }, ],

                traits: [],
                script() {
                    const table = [{
                            group: '云蝶轻智造',
                            module: [{
                                    name: '工程数据',
                                    price: '500'
                                },
                                {
                                    name: '简单生产',
                                    price: '3,500'
                                },
                                {
                                    name: '计划管理',
                                    price: '1,500'
                                },
                                {
                                    name: '普通生产',
                                    price: '2,500'
                                },
                                {
                                    name: '委外管理',
                                    price: '1,500'
                                },
                                {
                                    name: '车间管理',
                                    price: '2,000'
                                },
                                {
                                    name: '质量管理',
                                    price: '1,000'
                                },
                                {
                                    name: '实际成本',
                                    price: '1,500'
                                },
                                {
                                    name: '非标生产',
                                    price: '4,000'
                                },
                                {
                                    name: '设备管理',
                                    price: '1,500'
                                },
                                {
                                    name: '人力资源',
                                    price: '3,500'
                                },
                                {
                                    name: '轻WMS',
                                    price: '4,000'
                                },
                                {
                                    name: '轻MES',
                                    price: '5,000'
                                },
                                {
                                    name: '受委加工',
                                    price: '500'
                                },
                                {
                                    name: '检斤管理',
                                    price: '4,000'
                                },
                            ],
                            userprice: [{
                                    name: '0-5人',
                                    price: '￥0'
                                },
                                {
                                    name: '6-100人',
                                    price: '￥800'
                                },
                            ]
                        },
                        {
                            group: '云蝶轻智造',
                            module: [{
                                name: '云蝶轻智造',
                                price: '500'
                            }],
                            userprice: [{
                                    name: '0-5人',
                                    price: '￥0'
                                },
                                {
                                    name: '6-100人',
                                    price: '￥100'
                                }, {
                                    name: '101-500人',
                                    price: '￥150'
                                }
                            ]
                        },

                    ]
                    console.log(table[0].module.length);
                    let tbody = document.getElementById('table-body');
                    let length;
                    for (let i = 0; i < table.length; i++) {
                        length = table[i].module.length;
                        let tr = document.createElement('tr');
                        //  tr.setAttribute()
                        let td1 = document.createElement('td');
                        td1.setAttribute('rowspan', length);
                        let td2 = document.createElement('td');
                        let td3 = document.createElement('td');
                        let td4 = document.createElement('td');
                        td4.setAttribute('rowspan', length);
                        td1.textContent = table[i].group;
                        td2.textContent = table[i].module[0].name;
                        td3.textContent = '￥' + table[i].module[0].price;
                        td3.setAttribute('style', 'color:orange;');
                        for (let p = 0; p < table[i].userprice.length; p++) {
                            let p1 = document.createElement('p');
                            let span1 = document.createElement('span');
                            let span2 = document.createElement('span');
                            span2.textContent = '（' + table[i].userprice[p].name + '）';
                            span1.textContent = table[i].userprice[p].price;
                            span2.style.color = 'black';
                            p1.appendChild(span1);
                            p1.appendChild(span2);
                            // p1.textContent = '（' + table[i].userprice[p].name + '）';
                            td4.appendChild(p1);
                        }
                        tr.appendChild(td1);
                        tr.appendChild(td2);
                        tr.appendChild(td3);
                        tr.appendChild(td4);
                        tbody.appendChild(tr);
                        for (let j = 1; j < length; j++) {
                            let tr = document.createElement('tr');
                            let td2 = document.createElement('td');
                            let td3 = document.createElement('td');
                            let td4 = document.createElement('td');
                            td2.textContent = table[i].module[j].name;
                            td3.textContent = '￥' + table[i].module[j].price;
                            td3.setAttribute('style', 'color:orange;');
                            tr.appendChild(td2);
                            tr.appendChild(td3);
                            tbody.appendChild(tr);
                        }
                    }

                },
                styles: `
                .big-header{
                width: 100%;
                }
                 .normal-table {
            width: 100%;
            padding: none;
            border-collapse: collapse;
            border: 2px solid #d6d4d4;
        }

        .table-header {
            background-color: rgba(245, 247, 250, 1);

            height: 40px;
            text-align: left;
            /* padding-left:10px; */
        }

        .table-header th {
            margin: 0;
            border: 2px solid #d6d4d4;
            padding-left: 3%;
            font-weight: 700;
            width: 25%;
            font-size: 12px;
            box-sizing: border-box;
        }

        .table-body td {
            margin: 0;
            border: 2px solid #d6d4d4;
            padding-left: 3%;
            font-weight: 500;
            width: 25%;
            font-size: 12px;
            box-sizing: border-box;
        }
      
        .table-body td p span {
            color: orange;
        }
                  
                `
            },
            init() {},
        }
    });

    // 注册组件
    editor.BlockManager.add('addtablelist', {
        label: '商品表格',
        category: '其他类',
        media: '<svg t="1723123923324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4427" width="30" height="30"><path d="M811.3 156.5c7.7 7.7 11.6 17.8 11.6 28v296.8c0 10.9 8.9 19.8 19.8 19.8s19.8-8.9 19.8-19.8V184.5c0-20.3-7.7-40.5-23.2-56-15.4-15.5-35.7-23.2-56-23.2H724c-10.9 0-19.8 8.9-19.8 19.8s8.9 19.8 19.8 19.8h59.4c10.1 0 20.2 3.9 27.9 11.6zM446.9 105.3h118.7c10.9 0 19.8 8.9 19.8 19.8s-8.9 19.8-19.8 19.8H446.9c-10.9 0-19.8-8.9-19.8-19.8 0.1-10.9 8.9-19.8 19.8-19.8zM201.3 924.9c-7.7-7.7-11.6-17.8-11.6-28V184.5c0-10.1 3.9-20.3 11.6-28 7.7-7.7 17.8-11.6 28-11.6h59.4c10.9 0 19.8-8.9 19.8-19.8s-8.9-19.8-19.8-19.8h-59.4c-20.3 0-40.5 7.7-56 23.2-15.5 15.4-23.2 35.7-23.2 56v712.4c0 20.3 7.7 40.5 23.2 56 15.4 15.5 35.7 23.2 56 23.2h257.3c10.9 0 19.8-8.9 19.8-19.8s-8.9-19.8-19.8-19.8H229.3c-10.2 0-20.3-3.9-28-11.6zM368.5 204.3c10.7-0.4 19.1-9.5 19.1-20.3V66.3c0-10.7-8.4-19.9-19.1-20.3-11.2-0.4-20.5 8.6-20.5 19.8v118.7c0 11.2 9.2 20.2 20.5 19.8zM645.5 204.3c10.7-0.4 19.1-9.5 19.1-20.3V66.3c0-10.7-8.4-19.9-19.1-20.3-11.2-0.4-20.5 8.6-20.5 19.8v118.7c0.1 11.2 9.3 20.2 20.5 19.8z" p-id="4428"></path><path d="M763.6 361.9c-0.4-10.7-9.5-19.1-20.3-19.1H269.4c-10.7 0-19.9 8.4-20.3 19.1-0.4 11.2 8.6 20.5 19.8 20.5h474.9c11.1 0 20.1-9.3 19.8-20.5zM585.2 520.2c-0.4-10.7-9.5-19.1-20.3-19.1H269.4c-10.7 0-19.9 8.4-20.3 19.1-0.4 11.2 8.6 20.5 19.8 20.5h296.6c11.1 0 20.1-9.2 19.7-20.5zM268.8 659.4c-11.2 0-20.2 9.2-19.8 20.5 0.4 10.7 9.5 19.1 20.3 19.1h117.2c10.7 0 19.9-8.4 20.3-19.1 0.4-11.2-8.6-20.5-19.8-20.5H268.8zM795.3 953.4c0 13-10.6 23.6-23.6 23.6s-23.6-10.6-23.6-23.6 10.6-23.6 23.6-23.6c13 0 23.6 10.6 23.6 23.6zM632.4 953.4c0 13-10.6 23.6-23.6 23.6s-23.6-10.6-23.6-23.6 10.6-23.6 23.6-23.6c13.1 0 23.6 10.6 23.6 23.6zM767.6 855.7h-1l-170.3-8h-0.3c-21.2-1.3-39.2-16-44.8-36.5l-27.9-97.3c-3.6-12.2-1.2-25.1 6.4-35.3 7.7-10.3 19.5-16.2 32.3-16.2h223.4c11 0 20 9 20 20s-9 20-20 20H562c-0.2 0-0.3 0.3-0.3 0.3s0 0.1 0.1 0.1l28 97.5c0 0.1 0.1 0.2 0.1 0.3 1.1 4 4.5 6.8 8.6 7.1l170.1 8c11 0.5 19.6 9.9 19 20.9-0.5 10.8-9.4 19.1-20 19.1z" p-id="4429"></path><path d="M779.4 918.4H585.2c-11 0-20-9-20-20s9-20 20-20h194.2c4.9 0 9.1-3.6 10-8.5l37.4-218.8c3.6-20.9 21.6-36.7 42.8-37.6l29.6-1.2c11-0.5 20.3 8.1 20.8 19.2 0.4 11-8.1 20.3-19.2 20.8l-29.6 1.2c-2.4 0.1-4.6 2-5 4.4l-37.4 218.8c-4.2 24.2-24.9 41.7-49.4 41.7z" p-id="4430"></path></svg>',
        content: {
            type: 'addtablelist'
        },
    });
};